<template>
	<view class="content">
		<view class="navlist">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true" class="swiper">
				<swiper-item v-for="item in swiperlist" :key="item.id" class="swiper-item">
					<image :src="item.src" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="message">
			<view class="l1">
				<span>方隐自习室（航空港店）</span>
				<image src="../../static/xx3.png" mode="" class="liimg"></image>
			</view>
			<view class="l2">
				<view class="left">
					<view class="l2img">
						<image src="../../static/时间.png" mode="" class="l2img"></image>
					</view>
					<span>营业时间：07:00-24:00</span>
				</view>
				<image src="../../static/电话.png" mode="" class="l2img2"></image>
			</view>
			<view class="l3">
				<image src="../../static/定位.png" mode="" class="l3img"></image>
				<span>四川省成都市天府新区曙光国际B座1016〔距您1.8km )</span>
			</view>
		</view>
		<!-- 店铺特色分区 -->
		<view class="feature">
			<view class="header">
				<image src="../../static/店铺特色分区.png" mode="" class="img"></image>
			</view>
			<view class="nav">
				<view v-for="item in arry " :key="item.id" :class="{
					'list': true,
					oklist: listnum === item.id
				}" @click="updatelist(item.id)">
					{{ item.name }}
				</view>
			</view>
			<view class="content">
				<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" class="asd"
					:current="listnum" @change="swchage">
					<swiper-item>
						<image src="../../static/01.png" mode="" class="img1"></image>
						<image src="../../static/文字介绍图片合在一起了.png" mode="aspectFit" class="img2"></image>
						<view class="btncla">
							<button type="default" class="btn" @click="routerputh('纯享区',15,3)">预约选座</button>
						</view>
					</swiper-item>
					<swiper-item>
						<image src="../../static/m1.png" mode="" class="img1"></image>
						<image src="../../static/文字介绍图片合在一起了.png" mode="" class="img2"></image>
						<view class="btncla">
							<button type="default" class="btn" @click="routerputh('开放区',10,2)">预约选座</button>
						</view>
					</swiper-item>
					<swiper-item>
						<image src="../../static/m1.png" mode="" class="img1"></image>
						<image src="../../static/文字介绍图片合在一起了.png" mode="" class="img2"></image>
						<view class="btncla">
							<button type="default" class="btn" @click="routerputh('讨论区',40,5)">预约选座</button>
						</view>
					</swiper-item>
				</swiper>
			</view>

		</view>
		<view class="fenge">

		</view>
		<view class="Tab-Control">
			<view class="nav">
				<view v-for="item in Controlnav " :key="item.id" :class="{
					'list': true,
					oklist: item.id === Controllistnum
				}" @click="updateControllistclass(item.id, item.router)">
					{{ item.name }}
				</view>
				<!-- <view v-for="item in " :key="item.id" :class=" {
					'li': true,
					'okli': item.id === Controllistnum
				} " @click="updateControllistclass(item.id, item.router)">
					{{ item.name }}
				</view> -->
			</view>
			<view class="componentslist">
				<tap-list v-show="ControlCard === 'tabList'"></tap-list>
				<evaluate v-show="ControlCard === 'evaluate'"></evaluate>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist: [{
						id: 0,
						src: '../../static/roomimg/1.jpg'
					},
					{
						id: 1,
						src: "../../static/roomimg/2.jpg"
					},
					{
						id: 2,
						src: "../../static/roomimg/3.jpg"
					}
				],
				arry: [{
						id: 0,
						name: '纯享区'
					},
					{
						id: 1,
						name: '开放区'
					},
					{
						id: 2,
						name: '讨论区'
					}
				],
				listnum: 0,
				Controlnav: [{
						id: 0,
						name: '榜单',
						router: 'tabList'
					},
					{
						id: 1,
						name: '评价',
						router: 'evaluate'
					}
				],
				// Tab-Controllist的选中样式
				Controllistnum: 0,
				// 显示选项卡
				ControlCard: 'tabList'
			}
		},
		onLoad() {

		},
		methods: {
			updateControllistclass(id, router) {
				this.Controllistnum = id
				this.ControlCard = router
			},
			updatelist(id) {
				this.listnum = id
			},
			swchage(e) {
				this.listnum = e.detail.current
			},
			routerputh(name, hourprice, dayprice) {
				uni.navigateTo({
					url: `../yuding/yuding?name=${name}&hourprice=${hourprice}&dayprice=${dayprice}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fenge {
		width: 750rpx;
		height: 10rpx;
		background-color: #c8c8c8;
		margin-left: -16rpx;
	}

	.btncla {
		margin: 0 auto;
		width: 300rpx;
		margin-top: 15rpx;
		.btn {
			border: 0;
			background-color: #f28374;
			border-radius: 55rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 800;
		}
	}

	.content {
		padding: 0 16rpx;
	}

	.navlist {
		box-sizing: border-box;
		padding: 0 10rpx;
	}

	.swiper {
		margin: 0 auto;
		width: 100%;
		height: 360rpx;
		overflow: hidden;
	}

	.swiper-item {
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 360rpx;
	}

	.message {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		border-bottom: 2px solid #eaeaea;
	}

	.l1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		font-size: 35rpx;

		.liimg {
			width: 160rpx;
			height: 25rpx;
		}
	}

	.l2 {
		margin-top: 15rpx;
		font-size: 22rpx;
		color: #959595;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
		}

		.l2img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}

		.l2img2 {
			width: 60rpx;
			height: 40rpx;
		}

	}

	.l3 {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #959595;

		.l3img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}
	}


	.feature {
		box-sizing: border-box;
		padding: 15rpx 0;
		text-align: center;

		.header,
		.img {
			width: 300rpx;
			height: 40rpx;
		}

		.header {
			margin: 30rpx auto;
		}

		.nav {

			margin: 0 auto;
			width: 600rpx;
			display: flex;
			justify-content: center;
			gap: 45rpx;
			font-size: 32rpx;
			color: #8d8d8e;
			font-weight: 600;
			border-bottom: 1px solid #e5e5e5;

			.list {
				box-sizing: border-box;
				padding: 10rpx 0;
			}
		}

		.content {
			box-sizing: border-box;
			padding: 25rpx 0;
		}
	}

	.asd {
		height: 580rpx;

		.img1 {
			width: 700rpx;
			height: 330rpx;
			border-radius: 20rpx 20rpx 0 0;
		}

		.img2 {
			height: 130rpx;
		}
	}

	.oklist {
		color: #f28374 !important;
		border-bottom: 8rpx #f28374 solid !important;
		border-radius: 0 0 2rpx 2rpx;
	}

	.Tab-Control {
		padding: 30rpx 50rpx;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 35rpx 35rpx 0 0;

		.nav {
		
			margin: 0 auto;
			width: 600rpx;
			display: flex;
			justify-content: center;
			gap: 45rpx;
			font-size: 32rpx;
			color: #8d8d8e;
			font-weight: 600;
			border-bottom: 1px solid #e5e5e5;
		
			.list {
				box-sizing: border-box;
				padding: 10rpx 0;
			}
		}
		
	}
</style>
